<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset='utf-8' />
    <title>妙可蓝多央视少儿作品征集</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link href="css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div class="pop-bg show">
        <div class="pop-box" id="notice" style="display: block">
            <img class="pop-notice-title" src="images/pop_notice_title.png" width="100%" alt="" />
            <div class="pop-content-box">
                <p>若您参加本次活动，您将在此授权上海妙可蓝多食品科技股份有限公司，将有关本次活动的照片和视频片段用于营销和宣传。同时，您将在此授权上海妙可蓝多食品科技股份有限公司，以管理本次活动为目的，收集和使用您的个人数据和联系方式。</p>
            </div>
            <label class="pop-label-box flex">
                <input type="checkbox" id="noticeCheck" checked>
                <label for="noticeCheck"></label>
                <p>我已阅读并同意</p>
            </label>
            <div class="pop-btns-box flex">
                <div class="pop-confirm-btn"></div>
                <div class="pop-cancel-btn"></div>
            </div>
        </div>

        <div class="pop-box" id="uploadSuccess">
            <img class="pop-tips-title" src="images/pop_tips_title.png" width="100%" alt="" />
            <img class="upload-success-text" src="images/upload_success_text.png" width="100%" alt="" />
            <img class="upload-success-img" src="images/upload_success_img.png" alt="" />
            <div class="upload-success-text-box">
                <p>作品编号：#001</p>
                <p>我们会在24小时内审核完成</p>
            </div>
            <div class="server-qr-box">
                <img src="images/server_qr_code.png" alt="" />
                <p>如需了解更多活动内容，可扫码添加客服咨询</p>
            </div>
            <div class="pop-btns-box flex">
                <div class="pop-index-btn"></div>
                <div class="pop-cancel-btn"></div>
            </div>
        </div>

        <div class="pop-box" id="server">
            <img class="pop-server-title" src="images/pop_server_title.png" width="100%" alt="" />
            <div class="server-show-box">
                <div class="server-phone-box flex">
                    <img src="images/phone_icon.png" alt="" />
                    <h1>15601929027</h1>
                </div>
                <p>如需了解更多活动内容，可拨打客服电话</p>
            </div>
            <div class="server-show-box">
                <img class="server-qr-img" src="images/server_qr_code1.png" alt="" />
                <p>扫码添加客服微信咨询</p>
            </div>
            <div class="pop-btns-box flex">
                <div class="pop-index-btn"></div>
                <div class="pop-cancel-btn"></div>
            </div>
        </div>
    </div>

    <div class="page">
        <div class="server-box flex">
            <img src="images/server_icon.png" alt="" />
            <p>客服</p>
        </div>
        <div class="banner-box">
            <img src="images/banner.jpg" width="100%" alt="" />
        </div>
        <div class="rule-container flex">
            <div class="rule-btn flex">
                <img src="images/info_icon.png" alt="" />
                <p>活动规则</p>
            </div>
        </div>
        <div class="box">
            <div class="upload-title">作品上传</div>
            <div class="upload-up-box flex">
                <input id="upload" type="file" />
                <img class="delete" src="images/delete_icon.png" alt="" />
                <img id="uploadShow" src="images/product_img_demo.jpg" alt="" />
                <video src=""></video>
            </div>
            <div class="upload-head-box flex">
                <h1>选手头像</h1>
                <div class="upload-head-container">
<!--                    <img src="images/rank_img_demo.jpg" width="100%" alt="" />-->
                </div>
            </div>
            <div class="upload-input-box">
                <h1>才艺名称</h1>
                <input type="text" />
            </div>
            <div class="upload-input-box">
                <h1>选手名字</h1>
                <input type="text" />
            </div>
            <div class="upload-input-box">
                <h1>选手年龄</h1>
                <input type="text" />
            </div>
            <div class="upload-input-box">
                <h1>联系人手机号</h1>
                <input type="text" />
            </div>
            <div class="upload-input-box">
                <h1>才艺介绍（选填）</h1>
                <textarea></textarea>
            </div>
            <div class="upload-input-box">
                <h1>选手介绍（选填）</h1>
                <textarea></textarea>
            </div>
        </div>
        <div class="submit-btn"></div>
        <a href="index.html" class="back-index"><img src="images/back_index_btn.png" width="100%" alt="" /></a>
    </div>

    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
    <script type="text/javascript">
        $(function (e) {
            $('.delete').click(function (e) {
                $('.delete').hide();
                $('#uploadShow').hide();
            })

            $('#upload').change(function (e) {
                $('.delete').show();
                $('#uploadShow').show();
            })

            $('.server-box').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#server').show();
            })

            $('.rule-btn').click(function (e) {
                window.location.href = 'introduce.html';
            })

            $('.pop-index-btn').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#uploadSuccess').hide();
                window.location.href = 'index.html';
            })

            $('.submit-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#uploadSuccess').show();
            })

            $('.pop-cancel-btn').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            })

            $('.pop-confirm-btn').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#notice').hide();
            })
        })
    </script>

</body>
</html>